import React from 'react'
import { connect } from 'dva'
import { Form, Modal, message, Upload, Button, Select, Radio, Input } from 'antd'
import { Link, hashHistory } from 'dva/router'
import moment from 'moment'
// import config from 'config/config'
// import $ from 'jquery'
// import FlagBtn from 'widget/FlagBtn/FlagView'
import { mapStateToProps } from 'utils/view_utils'
import styles from './talkWayStatementStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
const { Option } = Select;


const talkWayStatementView = function ({ dispatch, model, form }) {
    // 表单的子函数
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
    // 取出model对象，命名空间
    const { modelObj, namespace } = model
    // modelObj.xxx获取model中状态机的值
    let { methodList,areaList, products, teamList,biz} = modelObj

    let pageProps = {
        // ---------- 界面部分 ----------
        ui: {
            // 页面接口地址
            api_url: `zituo-admin/a/report/getZiTuoStyleCountData`,
            // 接口方式
            method: "POST",
            app: "",
            // 接口参数
            params: {
                pageSize: '10',
                pageNo: '1',
            },
            // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
            // "mockData": mockData,
            mockData: null,
            // 查询栏
            search_bar: {
                fields: [
                    {
                        en_name: 'areaId',
                        zh_name: '区域',
                        elem_type: 'Select',
                        elem_valid_type: 'string',
                        cmpt_items: areaList,
                    },
                    {
                        en_name: 'projectId',
                        zh_name: '项目',
                        elem_type: 'Select',
                        elem_valid_type: 'string',
                        cmpt_items: products,
                        onFocus: () => {
                            if (biz.queryForm && biz.queryForm.areaId) {
                                dispatch({
                                    type: `${namespace}/filterProjectList`,
                                    payload: {}
                                })
                            }
                        },
                    },
                    {
                        en_name: 'teamId',
                        zh_name: '团队',
                        elem_type: 'Select',
                        elem_valid_type: 'string',
                        cmpt_items: teamList,
                        onFocus: () => {
                            if (biz.queryForm && biz.queryForm.projectId) {
                                getTeams(biz.queryForm.projectId)
                            }
                        },
                    },
                    {
                        en_name: 'reporterName',
                        zh_name: '姓名',
                        elem_type: 'Input',
                        elem_valid_type: 'string',
                    },
                    {
                        en_name: 'zituoMethodId',
                        zh_name: '拓客方式',
                        elem_type: 'Select',
                        elem_valid_type: 'string',
                        cmpt_items: methodList,
                        onFocus: () => {
                            if (biz.queryForm && biz.queryForm.areaId) {
                                dispatch({
                                    type: `${namespace}/getmMethod`,
                                    payload: {}
                                })
                            }
                        },
                    },
                    {
                        en_name: 'reportTime',
                        zh_name: '统计时间',
                        elem_type: 'Date',
                        format: 'YYYY-MM-DD',
                        // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
                        // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
                        split_keys: ['startTime', 'endTime'],
                        elem_valid_type: 'string'
                    }
                ],
                searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
                    console.log('search click')
                },
                resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
                    biz.queryForm.startTime = moment().startOf('month').format('YYYY-MM-DD')
                    biz.queryForm.endTime = moment().endOf('month').format('YYYY-MM-DD')
                    changeState({ biz })
                },
                searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
                    console.log('search finish', params)
                },
                pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
                    'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
                ]
            },
            // 数据表格  序号 是否生效 项目名称  佣金方案名称 方案生效日期 方案失效日期 审批人 审批通过日期   提交人 提交日期  创建人 创建日期
            table:
            {
                // rowSelectionInfo: {
                //     type: 'checkbox',
                // },
                status_params: "status=0",
                status_text: "全部",
                // 表头字段列表
                scroll: { x: 1800 },
                fields: [
                    {
                        en_name: "ruleNo",
                        zh_name: "编号",
                        width: 60,
                        render: (a, item, index, d, e, f) => {
                            return index + 1
                        },
                    },
                    {
                        en_name: "areaName",
                        zh_name: "区域",
                    },
                    {
                        en_name: "projectName",
                        zh_name: "项目",
                        width: 260,
                    },
                    {
                        en_name: "teamName",
                        zh_name: "团队",
                    },
                    {
                        en_name: "reporterName",
                        zh_name: "姓名",
                    },
                    {
                        en_name: "zituoMethodName",
                        zh_name: "拓客方式",
                    },
                    {
                        en_name: "reportNum",
                        zh_name: "报备",
                        sorter: (a, b) => a.reportNum - b.reportNum,
                        render: (text, row, index) => {
                            if(text>0){
                                return <a style={{color: '#0877fd'}} onClick={() => goCommissionList('已报备',row)}>{text}</a>
                            }else{
                                return text
                            }
                        },
                    },
                    {
                        en_name: "arriveNum",
                        zh_name: "到访",
                        sorter: (a, b) => a.arriveNum - b.arriveNum,
                        render: (text, row, index) => {
                            if(text>0){
                                return <a style={{color: '#0877fd'}} onClick={() => goCommissionList('已到访',row)}>{text}</a>
                            }else{
                                return text
                            }
                        },
                    },
                    {
                        en_name: "raiseNum",
                        zh_name: "认筹",
                        sorter: (a, b) => a.raiseNum - b.raiseNum,
                        render: (text, row, index) => {
                            if(text>0){
                                return <a style={{color: '#0877fd'}}  onClick={() => goCommissionList('已认筹',row)}>{text}</a>
                            }else{
                                return text
                            }
                        },
                    },
                    {
                        en_name: "orderNum",
                        zh_name: "认购",
                        sorter: (a, b) => a.orderNum - b.orderNum,
                        render: (text, row, index) => {
                            if(text>0){
                                return <a style={{color: '#0877fd'}} onClick={() => goCommissionList('已认购',row)}>{text}</a>
                            }else{
                                return text
                            }
                        },
                    },
                    {
                        en_name: "contractNum",
                        zh_name: "签约",
                        sorter: (a, b) => a.contractNum - b.contractNum,
                        render: (text, row, index) => {
                            if(text>0){
                                return <a style={{color: '#0877fd'}} onClick={() => goCommissionList('已签约',row)}>{text}</a>
                            }else{
                                return text
                            }
                        },
                    },
                    {
                        en_name: "arriveRate",
                        zh_name: "到访转化率",
                        sorter: (a, b) => a.arriveRate - b.arriveRate,
                    },
                    {
                        en_name: "contractRate",
                        zh_name: "成交转化率",
                        sorter: (a, b) => a.contractRate - b.contractRate,
                    },
                ],
            },
            // 操作栏
            action_bar: [
                {
                    label: "导出",
                    type: "primary",
                    onClick: (e, row) => {
                        down()
                    }
                }
            ]
        },
    }

      //跳转客户列表
    function goCommissionList(type,row){
        hashHistory.push({
            pathname: '/home/expandManage/customerList',
            query: {type:type ,datas: JSON.stringify(row)}
        })
    }
    //修改状态
    const changeState = (payload) => {
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { ...payload }
        })
    }
    // 获取团队
    function getTeams(id, type) {
        dispatch({
            type: `${namespace}/getTeamsByProjectId`,
            payload: { id: id, type: type }
        })
    }
    function down() {
        dispatch({
            type: `${namespace}/down`,
            payload: {}
        })
    }

    if (!!modelObj.biz) {
        pageProps.biz = modelObj.biz
        pageProps.biz.syncBackCbf = (biz) => {
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { biz }
            })
        }
    }

    return (
        <div className={cx('pageLayout')}>
            <ListPage pageProps={pageProps} />
        </div>
    )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(talkWayStatementView))
